<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h4>执法总览</h4>
          </div>
          <!-- <column-echart ref="columnEchart"></column-echart> -->
          <sector-echart ref="sectorEchart"></sector-echart>
        </el-card>
      </el-col>
      <el-col :span="8">
        <map-echart ref="mapEchart"></map-echart>
      </el-col>
      <el-col :span="8">
        <el-col :span="24">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <h4>罚没金额统计及趋势</h4>
            </div>
            <line-echart></line-echart>
          </el-card>
        </el-col>
        <el-col :span="24">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <h4>食品案件统计及趋势</h4>
            </div>
            <line-echart2></line-echart2>
          </el-card>
        </el-col>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col :span="4" v-for="(o, index) in cardList" :key="index">
        <el-card class="box-card">
          <div slot="header" class="clearfix" :bodyStyle="{ display: 'flex' }">
            <h4>{{ o.title }}</h4>
          </div>
          <pie-echart
            :listData="o.listData"
            :id="o.id"
            :title="title"
          ></pie-echart>
        </el-card>
      </el-col>
      <el-col :span="8">
        <!-- <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h4>食品案件统计及趋势</h4>
          </div>
          <line-echart2></line-echart2>
        </el-card> -->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h4>案件来源</h4>
          </div>
          <el-table :data="tableData">
            <el-table-column prop="date" label="隶属片区" width="100">
            </el-table-column>
            <el-table-column prop="address" label="案件标题"> </el-table-column>
            <el-table-column prop="name" label="案件数" width="80">
            </el-table-column>
          </el-table>
          <!-- <line-echart2></line-echart2> -->
        </el-card>
      </el-col>
    </el-row>

    <!-- <div id="myChart" style="width: 600px;height: 500px;"></div> -->
  </div>
</template>

<script>
import mapEchart from "./administrationModule/mapEchart";
import sectorEchart from "./administrationModule/sectorEchart";
import lineEchart from "./administrationModule/lineEchart";
import lineEchart2 from "./administrationModule/lineEchart2";
import pieEchart from "./administrationModule/pieEchart";
import columnEchart from "./creditModule/columnEchart";

// Vue.prototype.$echarts = echarts
require("echarts"); // echarts theme
export default {
  name: "chart",
  components: {
    mapEchart,
    lineEchart,
    lineEchart2,
    sectorEchart,
    pieEchart,
    columnEchart
  },
  data() {
    return {
      listArr: [], //城市json
      type: 0,
      cardList: [
        {
          title: "全区案件",
          id: "p1",
          listData: [
            { value: 1548, name: "全区立案数" },
            { value: 735, name: "全区结案数" }
          ]
        },
        {
          title: "片区案件",
          id: "p2",
          listData: [
            { value: 234, name: "片区立案数" },
            { value: 230, name: "片区结案数" }
          ]
        },
        {
          title: "罚没金额",
          id: "p3",
          listData: [
            { value: 534553, name: "全区罚没金额" },
            { value: 34245, name: "片区罚没金额" }
          ]
        },
        {
          title: "执法稽查",
          id: "p4",
          listData: [
            { value: 565, name: "全区稽查" },
            { value: 34, name: "片区稽查" }
          ]
        }
      ],
      tableData: [
        {
          date: "流水",
          name: "12",
          address: "未按照标准私自造医疗器械"
        },
        {
          date: "苏澳",
          name: "22",
          address: "未按照备案"
        },
        {
          date: "平原",
          name: "32",
          address: "没有许可证"
        },
        {
          date: "东奥",
          name: "10",
          address: "没有实行环境监测"
        }
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style scoped>
.home {
  display: flex;
  justify-content: space-around;
}

.left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.buttom {
  width: 200px;
  margin: 20px;
}

#myChart {
  width: 400px;
  height: 400px;
}
</style>
